<template>
  <div id="myRelease">
    <div>
      <el-radio-group v-model="actionSort" class="btn" @change="btnChange" style="float: right">
        <el-radio-button label="g">商品帖</el-radio-button>
        <el-radio-button label="w">求购帖</el-radio-button>
      </el-radio-group>
    </div>
    <div class="head">
      <div>宝贝</div>
      <div>单价</div>
      <div>数量</div>
      <div>浏览量</div>
      <div>收藏量</div>
      <div>发布时间</div>
      <div>操作</div>
    </div>
    <ul>
      <li v-for="(items, index) in activeUlData" :key="items.goodsWant.goodsWantInfo">
        <div class="li_head"><strong>{{items.goodsWant.goodsWantName}}</strong></div>
        <div class="li_detail">
          <img :src="items.goodsWant.goodsWantImage" alt="" @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)" style="cursor: pointer">
          <span style="width: 288px; display:inline-block; margin-left:10px; vertical-align: top"><a href="javascript:void(0)" @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)">{{items.goodsWant.goodsWantInfo}}</a></span>
          <span style="display:inline-block; vertical-align:top; margin-left:30px; width: 112px">￥{{items.goodsWant.goodsWantPrice}}</span>
          <span style="display:inline-block; vertical-align:top; width: 80px">{{items.goodsWant.goodsWantCount}}</span>
          <span style="display:inline-block; vertical-align:top; width: 105px">{{items.goodsWant.browsedCount}}</span>
          <span style="display:inline-block; vertical-align:top; width: 88px">{{items.goodsWant.collectedCount}}</span>
          <span style="display:inline-block; vertical-align:top; width: 221px">{{items.goodsWant.gmtCreate}}</span>
          <a style="display:inline-block; cursor:pointer" @click="deleteClick(items.goodsWant.goodsWantId, index)">删除</a>
        </div>
      </li>
    </ul>
    
  </div>
</template>

<script>
  import {request} from '@/network/request'

export default {
  data() {
    return {
      actionSort: 'g',
      ulData: [
        {goodsWant: {goodsWantId: '', goodsWantName: '', goodsWantInfo: '', goodsWantPrice: '', goodsWantCount: '', goodsWantImage: '', browsedCount: '', gmtCreate: '', browsedCount: '',
         collectedCount: '', isDeleted: '', goodsWant: ''}}
      ]
    }
  },
  computed: {
    // 筛选出isDeleted值为false的内容
    activeUlData: {
      get() {
        return this.ulData.filter(item => !item.goodsWant.isDeleted)
      },
      set() {}
    }
  },
  // 一进到本页面，就向服务器请求数据
  mounted() {
    request({
      url: '/action/showActionInfo',
      method: 'get',
      params: {
        userId: this.$store.state.userId,
        actionSort: this.actionSort
      }
    }).then(res => {
      console.log(res);
      this.ulData = res.data.data.items
    }).catch(err => {
      console.log(err);
    })
  },
  methods: {
    // 点击商品帖或求购帖时，向服务器发送请求
    btnChange(value) {
      this.actionSort = value
      request({
        url: '/action/showActionInfo',
        method: 'get',
        params: {
          userId: this.$store.state.userId,
          actionSort: this.actionSort
        }
      }).then(res => {
        // console.log(res);
        this.ulData = res.data.data.items
      }).catch(err => {
        console.log(err);
      })
    },
    deleteClick(goodsWantId, index) {
      // 点击删除按钮，向服务器发送请求
      request({
        url: `/goods-want/deleteGoodsWantInfo/${goodsWantId}`,
        method: 'delete'
      }).then(res => {
        console.log(res);
        if(res.data.flag) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          // 删除成功后，直接删除本地数据
          // this.activeUlData.splice(index, 1)
          this.ulData.splice(index, 1)
          // 删除成功后，重新发请求，更新页面数据
          // return request({
          //   url: '/action/showActionInfo',
          //   method: 'get',
          //   params: {
          //     userId: this.$store.state.userId,
          //     actionSort: this.actionSort
          //   }
          // })
          // .then(res => {
          //   console.log(res);
          //   this.ulData = res.data.data.items
          // }).catch(err => {
          //   console.log(err);
          // })
        }
      })
      // .then(res => {
      //   // console.log(res);
      //   // this.ulData = res.data.data.items
      //   this.activeUlData.splice(index, 1)
      // }, err => {
      //   console.log(err);
      // })
    },
    goodsClick(goodsWantId, goodsWant) {
      // 点击商品图片或文字，跳转到商品详情页面
      this.$store.commit('changeGoodsId', goodsWantId)
      this.$store.commit('changeGoodsWantDetail', goodsWant)
      this.$router.push('/goodsDetail')
    }
  }

}
</script>

<style scoped>
  #myRelease {
    font-size: 12px;
  }

  #myRelease .head {
    height: 39px;
    line-height: 39px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    clear: both;
  }

  #myRelease .head div {
    display: inline-block;
  }

  #myRelease .head div:first-child {
    width: 450px;
    text-align: center;
  }

  #myRelease .head div:nth-child(2) {
    width: 100px;
  }

  #myRelease .head div:nth-child(3) {
    width: 80px;
  }

  #myRelease .head div:nth-child(4) {
    width: 100px;
  }

  #myRelease .head div:nth-child(5) {
    width: 100px;
  }

  #myRelease .head div:nth-child(6) {
    width: 220px;
  }

  /* #myRelease .head div:nth-child(6) {
    width: 150px;
  } */

  #myRelease ul li {
    border: 1px solid #ececec;
    margin-bottom: 10px;
  }

  #myRelease ul li .li_head {
    background-color: #f5f5f5;
    height: 39px;
    line-height: 39px;
    padding-left: 30px;
  }

  #myRelease ul li .li_detail {
    padding: 20px 30px;
  }

  #myRelease ul li .li_detail img {
    width: 80px;
    height: 80px;
  }

  #myRelease ul li .li_detail a {
    text-decoration: none;
    color: inherit;
    vertical-align: top;
  }

  #myRelease ul li .li_detail a:hover {
    color: #f00;
  }
</style>